<template>
    <div class="destruction">
      <div class="destruction-wrap">
        <div class="destruction-header">
          <p>销毁</p>
          <!-- <img src="@/assets/img/close.png" @click="hidden()"> -->
        </div>
        <div class="destructionInfo">
          <ul>
            <li>
              <span>DAW denomID：</span>
              <el-input v-model="denomId" type="text" placeholder="请输入DAW denomID名称" />
            </li>
            <li>
              <span>tokenID：</span>
              <el-input v-model="dawid" type="text" placeholder="请输入tokenID名称" />
            </li>
          </ul>
          <el-button @click="destruction()">销毁</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // import * as api from '@/api/product/attr'
  export default {
    name: 'Destruction',
    data() {
      return {
        denomId: '',
        dawid: ''
      }
    },
    methods: {
      hidden() {
        // 通过$emit引用组件传过来的hidden()事件
        this.$emit('hidden')
      },
  
      // 点击确定
      destruction() {
        if (this.denomId === '') {
          this.$message({
            type: 'info',
            message: '请输入DAW denomID名称'
          })
          return false
        } else if (this.dawid === '') {
          this.$message({
            type: 'info',
            message: '请输入tokenID名称'
          })
          return false
        } else {
          const data = {
            denomId: this.denomId,
            dawid: this.dawid
          }
          this.$http({
              url: this.$http.adornUrl(`/admin/nftdaw`),
              method: 'put',
              data,
          }).then(({ data }) => {
              this.$message({
                type: 'success',
                message: '销毁成功'
              })
              this.$emit('hidden')
          })
        }
      }
    }
  }
  </script>
  
  <style scoped>
      li{list-style: none;}
      .destruction {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 2002;
      }
      .destruction-wrap {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 500px;
          height: 300px;
          background: #fff;
      }
      .destruction-header {
          position: relative;
          height: 50px;
          background: rgb(243, 243, 243);
          border-bottom: 1px solid #ccc;
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0 30px;
      }
      .destruction-header p {
          line-height: 30px;
          padding-left: 5px;
          border-left: 4px solid rgb(26, 188, 156);
      }
      .destruction-header img {
          position: absolute;
          right: 0;
          width: 40px;
          height: 40px;
          padding: 10px;
          cursor: pointer;
      }
      .destructionInfo {
          position: absolute;
          top: 25%;
          left: 48%;
          transform: translate(-50%, 0%);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }
      .destructionInfo ul{ padding-left: 0; }
      .destructionInfo ul li{
          display: flex;
          align-items: center;
          margin-top: 10px;
      }
      .destructionInfo ul li span{
          position: relative;
          display: inline-block;
          width: 200px;
          font-size: 13px;
          text-align: center;
      }
      .destructionInfo ul li:nth-child(1) span::before{
        content:"*";
        position: absolute;
        top: -2px; left: -4px;
        color: red;
        font-size: 20px;
      }
      .destructionInfo ul li:nth-child(2) span::before{
        content:"*";
        position: absolute;
        top: -2px; left: 15px;
        color: red;
        font-size: 20px;
      }
      .destructionInfo ul li input >>> .el-input{
          font-size: 13px;
          height: 30px;
          width:10px;
      }
      .destructionInfo button{
          width: 100px;
          height: 40px;
          margin-top: 20px;
          color: #fff;
          background: #1890ff;
      }
  </style>
  